<template>
  <div class="amount-range">
    <el-input v-model="minValue" placeholder="请输入" style="width: 140px; display: inline-block"></el-input>
    <span class="range-separator">~</span>
    <el-input v-model="maxValue" placeholder="请输入" style="width: 140px; display: inline-block"></el-input>
    <!-- <el-button type="text" @click="reset">重置</el-button>
    <el-button type="primary" @click="query">查询</el-button> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'

export default defineComponent({
  props: {
    initialMinValue: {
      type: Number as PropType<number | null>,
      required: false,
      default: null,
    },
    initialMaxValue: {
      type: Number as PropType<number | null>,
      required: false,
      default: null,
    },
  },
  setup(props) {
    const minValue = ref(props.initialMinValue ?? '')
    const maxValue = ref(props.initialMaxValue ?? '')

    function reset() {
      minValue.value = ''
      maxValue.value = ''
    }

    function query() {
      // 在这里处理查询逻辑
    }

    return {
      minValue,
      maxValue,
      reset,
      query,
    }
  },
})
</script>

<style scoped>
.amount-range {
  display: flex;
  align-items: center;
}

.range-separator {
  margin: 0 8px;
}
</style>
